<template>
  <view id="order-page">
    <view class="page-header">
      <view class="nav-header-tab active" style="width:100%">
        <div v-show="exchangeFlag">
          <div style="color: red;">
            可兑奖励积分 {{ this.comCanMoney }} ，积分 {{ this.canMoney }} ， 可兑总积分 {{ (parseFloat(this.canMoney) * 100 + parseFloat(this.comCanMoney) * 100)/100 }}
          </div>
          <div class="task-info">
            <!--<button class="confirm-btn" :disabled="this.isShowConfirm" @click="exchange('commission')">奖励积分兑换</button>-->
            <button class="confirm-btn" :disabled="this.isShowConfirm" @click="exchange()">兑换</button>
          </div>
        </div>
      </view>
    </view>
    <view class="page-content" style="margin-top: 130upx">
      <view class="order-list" v-for="(list,index) in goodsList" :key="index">
        <view class="order-card">
          <view class="card-header">
            <view class="card-header-h">
              <view class="header-icon" :class="shopImg[list.goods_type]"></view>
              <view class="shop-name">{{ list.goods_title }}</view>
            </view>
          </view>
          <view class="card-body">
            <view class="task-img-box" >
              <image class="task-img" :src="list.goods_img"></image>
            </view>
            <view class="task-info">
              <view class="cell">价格：<view class="task-info-content">￥{{list.goods_price}}</view></view>
              <view class="cell">库存：<view class="task-info-content">{{list.goods_stock}}</view></view>
              <view class="cell">
                <view class="task-info-content">
                  <input class="input" type="number" v-model="num[index]"
                         @input="inputUpdate(index)"
                         onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
                         placeholder="兑换数量"/>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="no-data-tips" v-if="goodsList.length == 0">
        <image class="no-data-img" src="../../static/img/no-data-img.png" mode=""></image>
        <view>暂无数据</view>
      </view>
      <uni-load-more :status="loadingType"></uni-load-more>
    </view>

    <div v-if="isShowConfirm" class="my-confirm">
      <div class="confirm-content-wrap" @click.stop>
        <view class="explanation-box">
          <view class="content">1.兑换金额最低
            <span style="font-weight: 800;color: #0048ff">{{lowest}}</span>
            ,最高
            <span style="font-weight: 800;color: #0048ff">{{highest}}</span>
          </view>
          <view class="content">
            2.当天兑换额度
            <span style="font-weight: 800;color: #0048ff">{{dayMaxMoney}}</span>
            ，当天兑换次数
            <span style="font-weight: 800;color: #0048ff">{{withdrewMaxNum}}</span>
            次
          </view>
          <view class="content" >3.默认 <span style="font-weight: 800;color: #0048ff">{{aliPayMin}}-{{aliPayMax}} </span>兑换到<span style="color: red">支付宝</span></view>
          <view class="content" >4.默认 <span style="font-weight: 800;color: #0048ff">{{wxPayMin}}-{{wxPayMax}} </span>兑换到<span style="color: red">微信</span></view>
          <view class="content">5.申请兑换后会马上到您的微信或支付宝</view>
          <view class="content">6.兑换需要已通过银行卡实名认证</view>
        </view>

        <div class="my-operation">
          <div v-if="type==='confirm'" class="my-cancel-btn" @click="clickClose()">
            <p class="my-btn-text my-border-right">{{ cancelText }}</p>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>

import {
  allCommissionCapitalCash,
  apiDecStock,
  apiGoodsList,
  pushAllWithdraw,
} from '../../../http/apis.js'
import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';

import {
  mapState
} from 'vuex'
export default {
  components: {
    uniLoadMore
  },
  computed: {
    ...mapState(['token'])
  },
  data() {
    return {
      cancelText: '取消', // 取消按钮的文字
      type: 'confirm', // 表明弹框的类型：confirm - 确认弹窗（没有取消按钮）
      isShowConfirm: true,

      decStock: [],
      loadingType: 'more',
      page: 0,
      exchangeFlag: false,
      premoney:0,
      num:[],
      goodsList: [],
      shopImg: {
        1:'el-icon-ali-tb',
        2:'el-icon-ali-tm',
        3:'el-icon-ali-jd',
        4: 'el-icon-ali-1688_icon',
        13:'el-icon-ali-wph',
        15:'el-icon-ali-pdd'
      },
      withdrawDayMaxMoneyed: 0,
      withdrawNum: 0,
      ali_is_bind: 0,
      lowest: 0,
      highest: 3,
      comCanMoney: 0,
      canMoney: 0,
      dayMaxMoney: 0,
      withdrewMaxNum: 0,
      aliPayMin: 0,
      aliPayMax: 0,
      wxPayMin: 0,
      wxPayMax: 0,

    };
  },
  onShow() {
    uni.showLoading({
      title: '加载中'
    });
    this.getGoodsList()
    this.getInitData()
    this.exchangeFlag = true
    this.isShowConfirm = true
  },
  // onLoad() {
  //   this.getInitData()
  // },
  onReachBottom(){
    // 上拉加载
    this.page = this.page + 1
    setTimeout(()=>{
      this.getGoodsList()
    },1000)
  },
  methods: {
    clickClose () {
      this.isShowConfirm = false
      this.outerData = null
    },

    getInitData(){
      allCommissionCapitalCash({
        token: this.token,
      }).then(res =>{
        if(res.data.code == 1)  {
          this.balance = res.data.msg.money;
          this.lowest = res.data.msg.min_money;
          this.highest = res.data.msg.max_money
          this.dayMaxMoney = parseInt(res.data.msg.day_max_money)
          this.withdrawDayMaxMoneyed = parseInt(res.data.msg.withdrew_max_moneyed)
          this.withdrawNum = parseInt(res.data.msg.withdrew_num)
          this.withdrewMaxNum = parseInt(res.data.msg.withdrew_max)
          this.aliPayMin = res.data.msg.aliPaymin
          this.aliPayMax = res.data.msg.aliPaymax
          this.wxPayMin = res.data.msg.weChatPaymin
          this.wxPayMax = res.data.msg.weChatPayMax
          this.comCanMoney = res.data.msg.com_can_money
          this.canMoney = res.data.msg.can_money
          if (res.data.msg.ali_is_bind === true) {
            this.ali_is_bind = 1
            this.aliaccount = res.data.msg.aliaccount
            this.aliname = res.data.msg.aliname
          }else{
            this.ali_is_bind = 0
          }
        }
      })
    },

    inputUpdate(index) {
      // Reflect.deleteProperty(this.num, index)
    },

    async getGoodsList(){
      this.loadingType = 'loading';
      apiGoodsList({
        token: this.token,
        page: this.page,
        pageSize: 10,
      }).then(res =>{
        if(res.data.code === 1)  {
          uni.hideLoading()
          let datas = res.data.msg;
          if(datas.length === 0){
            this.loadingType = 'nomore';
            return false;
          }
          for (const i in datas) {
            this.goodsList.push(datas[i])
          }
          this.loadingType = 'more';
        }
      }).catch(res => {
        uni.hideLoading()
        this.$msg.showToast(res.data.msg)
      })

    },

    // 兑换
    exchange(){
      // 1.判断是否选择数量及是否符合要求
      // 2.提交判断库存
      // 3.判断兑换金额是否符合要求
      // 4.入库
      // 4.减库存
      let tempMoney = 0
      let y = 0
      for (const i in this.goodsList) {
        if(this.goodsList[i].num > this.goodsList[i].goods_stock){
          this.$msg.showToast('库存不足')
          return
        }
        if(this.num[i]){
            this.decStock[y]  = {'id':this.goodsList[i].id,'value':this.num[i]}
            y++
        }
        if(this.num[i] > 0){
          tempMoney = tempMoney + this.goodsList[i].goods_price * parseInt(this.num[i])
        }
      }
      this.premoney = parseFloat((tempMoney * 100).toFixed(2))
      if(this.premoney === 0){
        this.$msg.showToast("兑换积分输入有误")
        return
      }

      if (this.premoney < this.lowest * 100) {
        this.$msg.showToast('兑换金额不低于' + this.lowest)
        return
      }
      if (this.premoney > this.highest * 100) {
        this.$msg.showToast('兑换金额不高于' + this.highest)
        return
      }

      let commission = 0;
      let principal = 0;
      if(this.premoney >  parseFloat((this.comCanMoney * 100).toFixed(2))  ){
        commission = parseFloat((this.comCanMoney * 100).toFixed(2));
        principal = this.premoney - commission;
      }else
      {
        commission = this.premoney
      }

      if(commission > parseFloat((this.comCanMoney * 100).toFixed(2))){
        this.$msg.showToast('奖励积分不足')
        return
      }

      if(principal > parseFloat((this.canMoney * 100).toFixed(2))){
        this.$msg.showToast('积分不足')
        return
      }

      let that = this
      uni.showModal({
        title: '提示',
        content: '确认兑换' + this.premoney/100,
        success: function (res) {
          if (res.confirm) {
            //去人兑换
            that.exchangeConfirm(commission/100,principal/100)
          } else if (res.cancel) {
          }
        }
      });
    },

    // 确认兑换
    exchangeConfirm(commission,principal){
      if (this.withdrawDayMaxMoneyed > this.dayMaxMoney) {
        this.$msg.showToast('当天兑换额度已用完')
        return
      }
      if (this.withdrawNum > this.withdrewMaxNum) {
        this.$msg.showToast('当天兑换次数已用完')
        return
      }
      if (this.ali_is_bind === 0) {
        this.$msg.showToast('请绑定支付宝后再进行操作')
        setTimeout(()=>{
          this.$router.push('/pages/bindInfo/bindAlipayCode?type=2&pushId=' + this.pushId	+ '&aliIsBind=0');
        },300)
        return
      }
      uni.showLoading({
        title: '提交中'
      });
      this.loading = true
      let that = this
      pushAllWithdraw({
        token: this.token,
        com_money: commission,// 兑换奖励积分
        money: principal// 兑换积分
      }).then(res =>{
        uni.hideLoading()
        this.loading = false
        if(res.data.code === 1)  {
          this.$msg.showToast(res.data.msg)
          // 兑换成功，减库存
          that.decStockMethod()
        } else {
          if (res.data.msg === '用户未绑定支付宝账号') {
            uni.navigateTo({
              url: '/pages/bindInfo/bindAlipayCode?type=2&pushId=' + this.pushId
            });
          }else{
            this.$msg.showToast(res.data.msg,4000)
          }
        }
      }).catch(res => {
        uni.hideLoading()
        this.loading = false
        this.$msg.showToast(res.data.msg)
      })
    },

    // 减库存
    decStockMethod(){
      apiDecStock({
        data: JSON.stringify(this.decStock)
      })
      .then(res =>{
        if(res.data.code === 1)  {
          setTimeout(()=>{
            uni.navigateTo({
              url:'./withdrawRecord'
            })
          },1000)
        } else {
          this.$msg.showToast("出错啦~~~")
          setTimeout(()=>{
            location.reload()
          },500)
          // uni.redirectTo({
          //   url: `/pages/video/video-info/video-info?vid=${vid}`,
          // });
        }
      })
      .catch(res => {
        // console.log(res)
        this.$msg.showToast(res.data.msg)
        setTimeout(()=>{
          location.reload()
        },1000)
      })
    },

  },
};
</script>

<style lang="scss">
page {
  background: #F5F5F5;
  overflow-y: hidden;
}
.page-header {
  text-align: center;
  font-size: $font-base;
  border-bottom: $border-bottom-sm;
  background: #FFFFFF;
  .nav-header-tab {
    display: inline-block;
    width: 50%;
    text-align: center;
    border-bottom: 2px solid transparent;
    &.active {
      border-bottom: 2px solid $theme-color;
      .header-title {
        color:$theme-color;
      }
    }
  }
  .header-title {

  }
  .header-tips {
    color: $font-color-disabled;
    margin-top: 10upx;
  }
}
#order-page {
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  .page-header {
    position: fixed;
    left: 0;
    top: var(--window-top);
    color: white;
    width: 100%;
    z-index: 1000;
  }
  .task-type-nav {
    padding: 32upx 0 0 32upx;
    border-bottom: 1px solid #EBEBEB;
    background: #FFFFFF;
    .nav-bar {
      display: inline-block;
      margin-right: 48upx;
      position: relative;
      .name {
        font-size: 26upx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        line-height: 26upx;
        &.click{
          font-size: 30upx;
          color: #FF8C00;
          line-height: 30upx;
        }
      }
      .under-line {
        width: 40%;
        height: 2px;
        background-color: #FF8C00;
        margin: 24upx auto 0 auto;

      }
      .num {
        background: $theme-color;
        color: #FFFFFF;
        display: inline-block;
        font-size: 24upx;
        width: 30upx;
        height: 30upx;
        text-align: center;
        line-height: 30upx;
        border-radius: 50%;
        position: absolute;
        right: -30upx;
        top: -20upx;
      }
    }

  }
  .no-check-num {
    background: $theme-color;
    color: #FFFFFF;
    display: inline-block;
    font-size: 24upx;
    width: 30upx;
    height: 30upx;
    text-align: center;
    line-height: 30upx;
    border-radius: 50%;
  }
  .no-check-num-1 {
    background: $theme-color;
    color: #FFFFFF;
    display: inline-block;
    font-size: 24upx;
    width: 30upx;
    height: 30upx;
    text-align: center;
    line-height: 30upx;
    border-radius: 50%;
    position: absolute;
    left: 19%;
    top: 7px;
  }
  .confirm-btn {
    display: inline-block;
    height: 70upx;
    line-height: 70upx;
    width: 30%;
    font-size: $font-sm;
    color: #fff;
    background: $theme-background-color;
    box-shadow: 1px 2px 5px $theme-color;
    margin: 21upx 64upx 15upx;
  }
}

.order-list {
  .order-card {
    padding: 36upx;
    background: #FFFFFF;
    margin-top: 24upx;
    .card-header {
      .card-header-h {
        .header-icon {
          display: inline-block;
          font-size: 40upx;
          vertical-align: bottom;
          margin-right: 18upx;
          &.el-icon-ali-tb {
            color: rgb(253, 77, 15);
          }
          &.el-icon-ali-jd {
            color: rgb(241, 48, 24);
          }
          &.el-icon-ali-pdd {
            color: rgb(240, 16, 15);
          }
          &.el-icon-ali-tm {
            color: rgb(253, 17, 39);
          }
          &.el-icon-ali-wph {
            color: rgb(219, 16, 113);
          }
          &.el-icon-ali-1688_icon {
            color: rgb(255, 103, 4);
          }
        }
        .shop-name {
          display: inline-block;
          font-size: 30upx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 40upx;
        }
      }
      .card-header-l {
        display: flex;
        align-items: center;
        .header-icon {
          display: inline-block;
          color: red;
          font-size: 40upx;
          vertical-align: bottom;
          margin-right: 18upx;
        }
        .task-code {
          font-size: 24upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 34upx;
          display: inline-block;
        }
        .copy-btn {
          font-size: 22upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          background: $theme-color;
          color: #FFFFFF;
          line-height: 32upx;
          border-radius: 18upx;
          display: inline-block;
          padding: 4upx 18upx;
          margin-left: 24upx;
        }
      }
    }
    .card-body {
      .task-img-box {
        display: inline-block;
        margin-top: 48upx;
        .task-img {
          width: 220upx;
          height: 220upx;
        }
      }
      .task-info {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 26upx;
        display: inline-block;
        margin-left: 32upx;
        vertical-align: top;
        margin-top: 52upx;
        .cell:nth-child(1),.cell:nth-child(2),.cell:nth-child(3),.cell:nth-child(4){
          margin-bottom: 22upx;
        }
        .task-info-content {
          color: #333333;
          display: inline-block;
          .input {
            height: 72upx;
            background: #ffffff;
            border-radius: 10upx;
            border: 1px solid #dfdfdf;
            padding-left: 32upx;
            font-size: 28upx;
          }

        }

      }
    }
    .fail-reason {
      padding: 20upx 0;
      color: red;
      font-size: 28upx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight:400;
    }
    .rebate-status {
      line-height: 28px;
      font-size: 26upx;
      color: #ff0f0099;
      margin-right: 10upx;
    }
    .card-footer {
      text-align: right;
      margin-top: 12upx;
      .card-footer-btn, .opt-btn {
        display: inline-block;
        border-radius: 30upx;
        border: 1px solid #999999;
        font-size: 26upx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        line-height: 36upx;
        padding: 10upx 34upx;
        margin-left: 24upx;
      }
      .opt-btn {
        background: $theme-background-color;
        color: #FFFFFF;
        border: 1px solid $theme-color;
      }
      .rebate-container {
        display: inline-block;
        vertical-align: text-top;
        .rebate-box {
          display: flex;
          .rebate-status {
            line-height: 28px;
            font-size: 26upx;
            color: #ff0f0099;
            margin-right: 10upx;
          }
          .rebate-btn {
            display: inline-block;
            border-radius: 30upx;
            border: 1px solid #ff0f0099;
            font-size: 26upx;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: #333333;
            line-height: 50upx;
            height: 50upx;
            padding: 2upx 34upx;
            background: #ff0f0099;
            color: #FFFFFF;
          }
        }
      }
    }
  }
}
.tb_view {
  font-size: 44upx;
  color: red;
  margin: 20upx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .tb_name_label {
    flex: 1;
    font-size: 30upx;
  }
  .tb_name {
    flex: 2;
    height: 60upx;
    margin: 0 auto;

    font-size: 30upx;
    padding: 10upx;
    text-align: left;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 8upx;
  }
}

#urge-detail {
  height: 150upx;
  line-height: 150upx;
  text-align: center;
  font-size: 36upx;
  text {
    color: red;
  }
}

.my-confirm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  /* 这里防止当用户长按屏幕，出现的黑色背景色块，以及 iPhone 横平时字体的缩放问题 */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 进入和出去的动画 */
.confirm-fade-enter-active {
  animation: opacity 0.3s;
}
.confirm-fade-enter-active .confirm-content-wrap {
  animation: scale 0.3s;
}
.confirm-fade-leave-active {
  animation: outOpacity 0.2s;
}

/* 包裹层容器样式 */
.confirm-content-wrap {
  position: absolute;
  top: 28%;
  left: 0;
  right: 0;
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 5px;
  z-index: 999;
  user-select: none;
}

/* 顶部标题部分 */
.my-confirm-title {
  padding-top: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  color: #333;
}

/* 中间内容部分 */
.my-confirm-content {
  padding: 0 15px;
  padding-top: 20px;
  margin-bottom: 32px;
  text-align: center;
  font-size: 16px;
  color: #666;
  line-height: 1.5;
}


.explanation-box {
    margin-top: 100upx;
    background: #FFFFFF;
    padding: 32upx;
    margin: 32upx;
    border-radius: 24upx;
    .title {
      font-size: 28upx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 28upx;
      margin-bottom: 28upx;
    }
    .content {
      font-size: 28upx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 400;
      color: #999999;
      line-height: 44upx;
    }
  }

/* 底部按钮样式 */
.my-operation {
  display: flex;
  border-top: 1px solid #eee;
}
.my-operation .my-cancel-btn, .confirm-btn {
  flex: 1;
}
.my-operation .confirm-btn {
  color: #ffb000;
}
.my-operation .my-btn-text {
  text-align: center;
  font-size: 16px;
  margin: 14px 0;
  padding: 6px 0;
}

/* 其他修饰样式 */
.my-border-right {
  border-right: 1px solid #eee;
}

/* 进来的动画 */
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/* 出去的动画 */
@keyframes outOpacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}



</style>


